<template>
  <div class="info-query">
    <div class="search-bar">
      <el-input
        v-model="searchQuery.name"
        clearable
        placeholder="输入姓名检索"
        style="width: 200px; margin-right: 10px"
        @keyup.enter="handleSearch"
      />
      <el-select v-model="searchQuery.checkStatus" clearable placeholder="选择状态检索" style="max-width: 200px" @change="handleSearch">
        <el-option label="全部" value="" />
        <el-option label="按时到" value="1" />
        <el-option label="迟到" value="2" />
        <el-option label="请假" value="3" />
        <el-option label="旷到" value="4" />
      </el-select>
    </div>

    <el-table v-loading="loading" :data="signInData" style="width: 100%; margin-top: 20px">
      <el-table-column align="center" label="序号" type="index" width="48" />
      <el-table-column align="center" label="姓名" prop="name" />
      <el-table-column align="center" label="照片" width="80">
        <template #default="{ row }">
          <el-image v-if="row.face" fit="cover" :src="row.face" style="width: 25px; height: 40px; border-radius: 2px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture-filled /></el-icon>
              </div>
            </template>
          </el-image>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" prop="mobile" />
      <el-table-column align="center" label="代表团" prop="userInfo.dept.name" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import Public from '~/src/api/public'

defineOptions({
  name: 'DataScreenRight2',
})

// 类型定义
interface SignInInfo {
  id: string
  name: string
  mobile: string
  faceUrl?: string
  isCheck: boolean
  checkType: string | null
  checkTime: string | null
}

interface ApiResponse<T> {
  code: number
  message: string
  result: {
    rows: T[]
    count: number
  }
}

// Props
const props = defineProps<{
  activityId?: string | number
}>()

// 响应式状态
const searchQuery = ref({
  name: '',
  checkStatus: '1',
})
const signInData = ref<SignInInfo[]>([])
const loading = ref(false)

// 获取签到数据
const fetchSignInData = async () => {
  if (!props.activityId) return

  loading.value = true
  try {
    const response = (await Public.getListApi({
      url: '/api/player',
      params: {
        activityId: props.activityId,
        page: 1,
        limit: 1000,
        ...searchQuery.value,
      },
    })) as unknown as ApiResponse<SignInInfo>

    if (response.code === 0) {
      signInData.value = response.result.rows
    }
  } catch (error) {
    console.error('获取签到信息失败:', error)
    ElMessage.error('获取签到信息失败')
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  fetchSignInData()
}

// 监听活动ID变化
watch(
  () => props.activityId,
  (newVal) => {
    if (newVal) {
      fetchSignInData()
    }
  }
)

// 组件挂载时获取数据
onMounted(() => {
  if (props.activityId) {
    fetchSignInData()
  }
})
</script>

<style lang="scss" scoped>
.info-query {
  color: rgba(255, 255, 255, 0.9);
  overflow: auto;
  height: 100%;

  .search-bar {
    display: flex;
    align-items: center;

    :deep(.el-input__wrapper) {
      background: rgba(64, 158, 255, 0.1);
      box-shadow: none;
      border: 1px solid rgba(64, 158, 255, 0.1);

      .el-input__inner {
        color: #ffffff;
        &::placeholder {
          color: rgba(255, 255, 255, 0.4);
        }
      }
    }

    :deep(.el-select) {
      .el-input__wrapper {
        background: rgba(64, 158, 255, 0.1);
        box-shadow: none;
        border: 1px solid rgba(64, 158, 255, 0.1);
      }
      .el-select__wrapper {
        background: rgba(64, 158, 255, 0.1);
        box-shadow: none;
        border: 1px solid rgba(64, 158, 255, 0.1);
      }
      .el-select__tags {
        background: transparent;
      }

      .el-select-dropdown__item {
        color: #ffffff;
        background: transparent;

        &.hover,
        &:hover {
          background: rgba(64, 158, 255, 0.1);
        }

        &.selected {
          background: rgba(64, 158, 255, 0.1);
          color: #ffffff;
        }
      }
    }
  }
}

:deep(.el-table) {
  --el-table-border-color: rgba(64, 158, 255, 0.1);
  --el-table-header-bg-color: rgba(64, 158, 255, 0.1);
  --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.1);

  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;

  .el-table__inner-wrapper {
    background-color: transparent !important;
  }

  .el-table__header-wrapper {
    th {
      background-color: #545bcc !important;
      color: #ffffff !important;
      font-weight: 500;
      border-bottom: 1px solid rgba(64, 158, 255, 0.1);
    }
  }

  .el-table__body-wrapper {
    background-color: transparent !important;

    tr {
      background-color: transparent !important;
      td {
        border-bottom: 1px solid rgba(64, 158, 255, 0.1);
      }

      &:hover > td {
        background-color: rgba(64, 158, 255, 0.1) !important;
      }
    }
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(64, 158, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;

    .el-icon {
      font-size: 20px;
    }
  }
}
</style>
